<!--
 * @Author: 陆康永 email@email.com
 * @Date: 2024-10-22 14:26:35
 * @LastEditors: 陆康永 email@email.com
 * @LastEditTime: 2024-10-22 14:50:12
 * @FilePath: /路径动画/svgPath.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
        <!-- <path id="motionPath" fill="none" stroke="red" d="M10 10 H190 V190 H10 L10 10" /> -->
        <path id="motionPath"
            d="m323,213c0,0 172,-34 172,-33c0,1 -21,125 -21,125c0,0 -60,77 -60,77c0,0 -73,-2 -73,-2c0,0 -75,-48 -75,-48c0,0 -46,-60 -46,-60c0,0 -7,-83 -7,-83c0,0 68,-72 68,-72c0,0 115,-58 115,-58c0,0 160,17 160,17c0,0 68,76 68,76c0,0 2,96 2,96c0,0 -49,108 -49,108c0,0 -78,105 -78,105c0,0 -92,4 -92,4c0,0 -77,-8 -78,-8c-1,0 -90,-27 -90,-27"
            opacity="1" fill="none" stroke="red" />
        <image href="https://wimg.588ku.com/gif320/24/07/09/69563d8ad59d475abc555ba39e083954.gif" height="100"
            width="150" x="-75" y="-80">
            <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#motionPath" />
            </animateMotion>
        </image>


        <!-- 
        <rect id="svg_1" height="41" width="65" stroke="blue" fill="blue">
            <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#motionPath" />
            </animateMotion>
        </rect>


        <circle fill="blue" cx="0" cy="0" r="5">
            <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#motionPath" />
            </animateMotion>
        </circle> -->
    </svg>
</body>

</html>